<template>
	<view class="layout">
		<view class="navbar" :style="{top:getNavBarHeight()+'px'}">
			<navigator url="/pages/DiscoverView/attention" class="nav-item">关注</navigator>
			<navigator url="/pages/DiscoverView/DiscoverView" class="nav-item active">推荐</navigator>
			<navigator url="/pages/DiscoverView/DiscoverView" class="nav-item">热门</navigator>
			<navigator url="/pages/DiscoverView/classification" class="nav-item">分类</navigator>
		</view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}">
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { 
	getStatusBarHeight,
	getTitleBarHeight,
	getNavBarHeight,
	getLeftIconLeft,
	} from '@/utils/system.js'
defineProps({
	title:{
		type:String,
		default:""
	}
})

</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 6;
		background: ghostwhite;
		display: flex;
		justify-content: space-around;
		background-color: ghostwhite;
		padding: 10px 0;
		.nav-item {
			height: 50rpx;
			flex: 1;
			text-align: center;
			color: #333;
		}
		
		.nav-item.active {
			color: #ff4d4f;
			/* 活动项的颜色 */
			border-bottom: 2px solid #ff4d4f;
			/* 活动项底部的下划线 */
		}
		
	}
}
</style>